<template>
  <div>
    <van-nav-bar
      title="密码登录"
      left-arrow
      @click-left="$router.push('/cityList')"
    />

    <!-- 账号密码 -->

    <div class="shang">
      <van-field v-model="user.username" placeholder="请输入用户名" />
      <van-field
        v-model="user.password"
        type="password"
        placeholder="请输入密码"
      />

      <div class="yanzheng">
        <van-field v-model="user.captcha_code" placeholder="验证码" />

        <span class="zi">{{ num }}</span>
        <div class="yang">
          <span @click="cleanFn">看不清</span>
          <!-- <br /> -->
          <span class="lanse" @click="cleanFn">换一张</span>
        </div>
      </div>
    </div>
    <p>温馨提示：未注册过的账号，登录时将自动注册</p>
    <p>注册过的用户可凭账号密码登录</p>
    <van-button type="primary" @click="btnFn" block>登录</van-button>
    <div class="reset" @click="pwdFn">重置密码?</div>
  </div>
</template>

<script>
import { cangdu } from "../api/user";
export default {
  data() {
    return {
      user: {
        username: "15017594019",
        password: "123",
        captcha_code: "5588",
      },
      num: "1314",
    };
  },

  methods: {
    btnFn() {
      if (
        !this.user.username ||
        !this.user.password ||
        !this.user.captcha_code
      ) {
        this.$toast.fail("输入用户或密码不能为空");
        return;
      }
      cangdu(this.user).then((res) => {
        localStorage.setItem("token", res.data.user_id);
        console.log(res);
        this.$router.push("/cityList");
      });
    },
    cleanFn() {
      this.num =
        Math.round(Math.random() * 1000) + Math.round(Math.random() * 10000);
    },

    pwdFn() {
      this.user.username = "";
      this.user.password = "";
      this.user.captcha_code = "";
    },
  },
};
</script>

<style lang="less" scoped>
.yanzheng {
  display: flex;
  align-items: center;
  width: 100%;
  height: 50px;
  padding: 5px 0;
  background-color: #fff;
  .yanzhengma {
    font-size: 20px;
    margin-left: 10px;
    color: #848484;
  }

  p {
    display: flex;
  }
  .zi {
    margin-left: 370px;
    font-size: 20px;
    font-weight: 700;
    color: #848484;
  }
}
.yang {
  display: flex;

  padding: 10px;
  span {
    margin-left: 10px;
  }
}
p {
  margin: 30px 20px;
  color: red;
}
/deep/.van-nav-bar {
  background-color: #3792e5;
  .van-nav-bar__title {
    color: #fff;
  }
  .van-nav-bar__arrow {
    color: #fff;
  }
}
.van-cell {
  border-bottom: 1px solid #ccc;
}
/deep/.van-field__body {
  width: 200px;
}
.van-switch {
  position: fixed;
  right: 6px;
  top: 120px;
}

.lanse {
  color: #6cf;
}
.shang {
  margin-top: 20px;
}
.reset {
  position: fixed;
  margin-top: 100px;
  margin-left: 500px;
  color: #6cf;
}
</style>